<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link href="/asset/css/admin.css" rel="stylesheet" />
    <style id='panda-theme-color'></style>
</head>
<body class="theme-panda">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="keywords" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: auto;">
                            <button lay-submit="" class="layui-btn layui-btn-sm layui-btn-primary"  lay-filter="searchForm" id="search"><i class="layui-icon">&#xe615;</i>搜索查询</button>
                            <a href="javascript:" class="layui-btn layui-btn-sm layui-btn-primary btnOption btnAdd" id="add" data-param='[]' lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加菜单</a>
                            <button id="expand"   class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe668;</i>全部展开</button>
                            <button id="collapse" class="layui-btn layui-btn-sm layui-btn-warm"><i class="layui-icon">&#xe66b;</i>全部折叠</button>
                        </div>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
            <!-- 表格操作列 -->
            <script type="text/html" id="toolBar">
                <a class="layui-btn layui-btn-xs btnEdit" lay-event="edit" title="编辑"><i class="layui-icon">&#xe630;</i>编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger btnDel" lay-event="del" title="删除"><i class="layui-icon">&#xe630;</i>删除</a>
                {{#  if(d.type < 4){ }}
                <a class="layui-btn layui-btn-xs layui-btn-normal btnAdd2" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</a>
                {{#  } }}
            </script>
            <script type="text/html" id="statusTpl">
                <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="显示|不显示" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
            </script>
        </div>
    </div>
</div>
<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<script type="text/javascript">

    layui.use(['func', 'com', 'form', 'transfer'], function () {
        //声明变量
        var func = layui.func
            , common = layui.com
            , form = layui.form
            , transfer = layui.transfer
            , $ = layui.$;
        if (A == 'index') {
            //【TABLE列数组】
            var cols = [
                {field: 'id', width: 80, title: 'ID', align: 'center', sort: true}
                , {field: 'name', width: 200, title: '菜单名称', align: 'left'}
                /*
                , {field: 'type', width: 80, title: '类型', align: 'center', templet(d) {
                        var cls = "";
                        if (d.type == 1) {
                            // 模块
                            cls = "layui-btn-normal";
                        } else if (d.type == 2) {
                            // 导航
                            cls = "layui-btn-danger";
                        } else if (d.type == 3) {
                            // 菜单
                            cls = "layui-btn-warm";
                        } else if (d.type == 4) {
                            // 节点
                            cls = "layui-btn-primary";
                        }
                        return '<span class="layui-btn ' + cls + ' layui-btn-xs">' + d.typeName + '</span>';
                    }
                }*/
            //    , {field: 'icon',width: 80,title: '图标',align: 'center',templet: '<p><i class="layui-icon {{d.icon}}"></i></p>'}
            //    , {field: 'url', width: 150, title: 'URL地址', align: 'center'}
            //    , {field: 'permission', width: 180, title: '权限标识', align: 'center'}
                , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
                , {field: 'sort', width: 90, title: '显示顺序', align: 'center'}
                , {field: 'createTime', width: 180, title: '创建时间', align: 'center', sort: true}
                , {field: 'updateTime', width: 180, title: '更新时间', align: 'center', sort: true}
                , {fixed: 'right', width: 220, title: '功能操作', align: 'left', toolbar: '#toolBar'}
            ];

            //【渲染TABLE】
            func.treetableIns(cols, "tableList");
            //【设置弹框】
            func.setWin("类别", 500, 350);
            //【设置状态】
            func.formSwitch('status', null, function (data, res) {

            });
        } else {
            // 初始化
            var type = $("#type").val();
            if (type == 3) {
                $(".funcIds").removeClass("layui-hide");
            } else {
                $(".funcIds").addClass("layui-hide");
            }
            /**
             * 权限节点隐藏控制
             */
            form.on('select(type)', function (data) {
                var val = data.value;
                if (val == 3) {
                    $(".funcIds").removeClass("layui-hide");
                } else {
                    $(".funcIds").addClass("layui-hide");
                }
            });

            /**
             * 提交表单
             */
            form.on('submit(submitForm2)', function (data) {
                if (data.field['type'] == 3) {
                    // 获取穿梭组件的选中值
                    var funcList = transfer.getData('funcIds'); //获取右侧数据
                    // 重组数据并赋值给字段
                    var item = [];
                    $.each(funcList, function (key, val) {
                        item.push(val['value']);
                    });
                    data.field['funcIds'] = item.join(",");
                }
                // 提交表单
                common.submitForm(data.field, null, function (res, success) {
                    console.log("保存成功回调");
                });
                return false;
            });
        }
    });
</script>
</body>
</html>